<template>
  <div class="details">
    <!-- 导航栏 -->
    <van-nav-bar title="文章详情" left-arrow @click-left="$router.back()" />
    <!-- 这是外部盒子给所有内容一个pinding -->
    <div class="dtlmain">
      <h3>{{ articleInfo.title }}</h3>
      <!-- 这是关注盒子 -->
      <div class="attention">
        <!-- 名字跟头像的盒子 -->
        <div class="userinfo">
          <!-- 头像 -->
          <van-image round fit="cover" :src="articleInfo.aut_photo" />
          <!-- 名字跟时间的盒子 -->
          <div class="username">
            <h4>{{ articleInfo.aut_name }}</h4>
            <span>{{ articleInfo.pubdate | getYear }}</span>
          </div>
        </div>
        <van-button icon="plus" type="info" round>关注</van-button>
      </div>
      <!-- 这是内容部分 -->
      <div class="content" v-html="articleInfo.content"></div>
      <van-divider>end</van-divider>
      <!-- 点赞和不喜欢 -->
      <div class="btns">
        <van-button round plain icon="good-job-o" type="primary"
          >点赞</van-button
        >
        <van-button round plain icon="delete-o" type="danger"
          >不喜欢</van-button
        >
      </div>
    </div>
    <!-- 评论区和发布 -->
    <comment />
  </div>
</template>

<script>
import { articleDetailsAPI, getCommentAPI, articleCommentAPI } from "@/api";
// 导入评论组件
import comment from "./comment.vue";
export default {
  // 注册按钮
  components: {
    comment,
  },
  data() {
    return {
      articleInfo: {},
    };
  },
  async created() {
    // 获取文章详情
    let res = await articleDetailsAPI(this.$route.query.id);
    this.articleInfo = res.data.data;
  },
};
</script>

<style lang='less' scoped>
.details {
  .dtlmain {
    padding: 0 20px;
    h3 {
      font-size: 24px;
      margin: 10px 0;
    }
    .attention {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80px;
      margin-bottom: 20px;
      .userinfo {
        display: flex;
        justify-content: center;
        align-items: center;
        .van-image {
          margin-right: 10px;
          width: 70px;
          height: 70px;
        }
      }
    }
    .content {
      ::v-deep p,
      ::v-deep li,
      ::v-deep h3 {
        white-space: nowrap;
        overflow: hidden;
        margin-bottom: 15px;
      }
      ::v-deep pre {
        overflow: auto;
        background-color: black;
        color: #fff;
      }
      ::v-deep img {
        width: 100%;
      }
    }
    .btns {
      height: 77px;
      display: flex;
      justify-content: space-around;
      .van-button {
        width: 120px;
      }
    }
  }
  .plscomment {
    position: fixed;
    bottom: 0;
  }
}
</style>